<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="formRef"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item :label="$t('common.belong_merchant') + ':'">
						<merchant-select
							v-model="queryData.merchantId"
							:merchantInfo.sync="merchantObj"
						></merchant-select>
					</el-form-item>
					<el-form-item :label="$t('report.statistical_date') + ':'">
						<el-date-picker
							v-model="searchTime"
							type="daterange"
							range-separator="-"
							:start-placeholder="$t('report.start_date')"
							:end-placeholder="$t('report.end_date')"
							:picker-options="pickerOptionsReport"
						></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('report.venue_type') + ':'">
						<el-select
							v-model="queryData.venueType"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in venueTypeList"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-col :span="8">
							<el-select
								v-model="accountFlag"
								:placeholder="$t('common.please_choose')"
							>
								<el-option
									:label="$t('common.member_number')"
									value="memberName"
								/>
								<el-option
									:label="$t('common.top_agent')"
									value="parentProxyName"
								/>
								<el-option
									:label="$t('report.general_account')"
									value="topProxyName"
								/>
							</el-select>
						</el-col>
						<el-col :span="16">
							<el-input
								v-if="accountFlag === 'memberName'"
								v-model.trim="queryData.memberName"
								clearable
								:placeholder="$t('common.please_enter')"
							></el-input>
							<el-input
								v-if="accountFlag === 'parentProxyName'"
								v-model.trim="queryData.parentProxyName"
								clearable
								:placeholder="$t('common.please_enter')"
							></el-input>
							<el-input
								v-if="accountFlag === 'topProxyName'"
								v-model.trim="queryData.topProxyName"
								clearable
								:placeholder="$t('common.please_enter')"
							></el-input>
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('701061')"
							type="warning"
							icon="el-icon-download"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<el-table
					key="father"
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					show-summary
					:summary-method="
						(val) => handleRow(val, subSummary, totalSummary)
					"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						prop="memberName"
						align="center"
						min-width="150"
						:label="$t('common.member_number')"
					></el-table-column>
					<el-table-column
						prop="parentProxyName"
						align="center"
						min-width="150"
					>
						<template slot="header">
							{{ $t('common.top_agent') }}
							<br />
							{{ $t('report.general_account') }}
						</template>
						<template slot-scope="scope">
							{{ scope.row.parentProxyName || '-' }}
							<br />
							{{ scope.row.topProxyName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						min-width="150"
						:label="$t('common.belong_merchant')"
					>
						<!-- <template slot="header">
							{{ $t('common.belong_merchant') }}
							<br />
							{{ $t('report.main_merchant') }}
						</template>
						<template slot-scope="scope">
							{{ scope.row.merchantName }}
							<br />
							{{ scope.row.topMerchantMame }}
						</template> -->
					</el-table-column>
					<el-table-column
						prop="venueTypeName"
						align="center"
						:label="$t('report.venue_type')"
					></el-table-column>
					<el-table-column
						prop="betCount"
						align="center"
						min-width="150"
						:label="$t('report.bet_count')"
					>
						<template slot-scope="scope">
							{{ handleNumber('', scope.row.betCount, 0) }}
						</template>
					</el-table-column>
					<el-table-column
						prop="validBetAmount"
						align="center"
						min-width="150"
						:label="$t('report.valid_bet_amount')"
					>
						<template slot-scope="scope">
							{{ handleCurrency(scope.row.currency) }}
							{{
								handleNumber(
									scope.row.currency,
									scope.row.validBetAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="netAmount"
						align="center"
						min-width="150"
						:label="$t('member.members_win_or_lose')"
					>
						<template slot-scope="scope">
							<span
								:style="handleNumberColor(scope.row.netAmount)"
							>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.netAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					class="pageValue"
					:current-page.sync="pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size.sync="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import dayjs from 'dayjs'
import list from '@/mixins/list'
import summaryList from './components/summaryList'
const start = dayjs()
	.startOf('day')
	.valueOf()
const end = dayjs()
	.endOf('day')
	.valueOf()
const setSearchTime = () => [
	dayjs()
		.startOf('day')
		.valueOf(),
	dayjs()
		.endOf('day')
		.valueOf()
]
export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'memberGameProfitAndLoss',
	components: {},
	mixins: [list, summaryList],
	data() {
		return {
			queryData: {
				memberName: undefined,
				parentProxyName: undefined,
				topProxyName: undefined
			},
			searchTime: [start, end],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			accountFlag: 'memberName',
			merchantObj: ''
		}
	},
	computed: {
		venueTypeList() {
			return this.globalDics.bwVenueTypeList || []
		}
	},
	watch: {
		accountFlag: {
			handler(newVal, oldVal) {
				this.$set(this.queryData, newVal, '')
				this.$set(this.queryData, oldVal, '')
			}
		}
	},
	created() {},
	mounted() {},
	methods: {
		loadData() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				dateStart: dayjs(timeArr[0]).format('YYYYMMDD'),
				dateEnd: dayjs(timeArr[1]).format('YYYYMMDD'),
				...this.getParams()
			}
			this.tableData = []
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	this.total = 0
			// 	return
			// }
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getMemberVenueTypeList(params)
				.then((res) => {
					this.loading = false
					this.tableData = res?.data?.record || []
					this.total = res?.data?.totalRecord || 0
					this.subSummary = res?.data?.summary || {}
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getMemberVenueTypeSummary(params)
				.then((res) => {
					this.loading = false
					this.totalSummary = res?.data || {}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.merchantObj = ''
			this.queryData = {
				memberName: undefined,
				parentProxyName: undefined,
				topProxyName: undefined
			}
			this.searchTime = setSearchTime()
			this.accountFlag = 'memberName'
			this.loadData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				dateStart: dayjs(timeArr[0]).format('YYYYMMDD'),
				dateEnd: dayjs(timeArr[1]).format('YYYYMMDD')
			}
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	return
			// }
			this.exportExcel(params)
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
